<!-- 优惠劵详情 -->
<template>
	<view class="page_box">
		<view class="head_box">
			<cu-custom :isBack="true">
				<block slot="backText">支付</block>
				<block slot="content"></block>
			</cu-custom>
		</view>
		<view class="content_box">
			<u-action-sheet :list="list" v-model="show" @click="click"></u-action-sheet>
			<!-- <u-button @click="show = true">打开ActionSheet</u-button> -->

			<view class="head1 " @click="show = true">
				选择支付方式
				<text class="margin-left-sm ">{{ def }}</text>
				<text class="cuIcon-unfold margin-left-sm"></text>
			</view>
			<view class="info flex justify-between flex-direction  align-center" v-if="def == '微信'">
				<text>微信账号</text>
				<text @click="copy(data[1].account)">{{ data[1].account }}</text>
				<image :src="data[1].image" mode="" @click="yulan(data[1].image)" style="width: 290rpx; height: 290rpx;" class=" radius"></image>
				<text>(店家账号或二维码即可复制)</text>
				<text class="tt">打开微信扫码支付</text>
			</view>
			<view class="info flex justify-between flex-direction  align-center" v-if="def == '支付宝'">
				<text>支付宝账号</text>
				<text @click="copy(data[0].account)">{{ data[0].account }}</text>
				<image :src="data[0].image" mode="" @click="yulan(data[0].image)" style="width: 290rpx; height: 290rpx;" class=" radius"></image>
				<text>(店家账号或二维码即可复制)</text>
				<text class="tt">打开支付宝扫码支付</text>
			</view>
			<view class="info flex justify-between flex-direction  align-center" v-if="def == '银行卡'" style="height: 400rpx;">
				<text>银行卡账号</text>
				<text @click="copy(data[2].account)">{{ data[2].account }}</text>
				<!-- <image :src="data[2].image" mode="" @click="yulan(data[2].image)" style="width: 290rpx; height: 290rpx;" class="radius"></image> -->

				<text>开户银行: {{ data[2].back }}</text>
				<text>账户名: {{ data[2].name }}</text>

				<!-- <text>(店家账号或二维码即可复制)</text> -->
				<text class="tt">打开银行卡支付</text>
			</view>

			<button class="head submit cu-btn" @click="jump('/pages/app/coupon/tijiao')">提交凭证</button>
		</view>
		<view class="foot_box"></view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 关注弹窗 -->
		<shopro-float-btn></shopro-float-btn>
		<!-- 连续弹窗提醒 -->
		<shopro-notice-modal></shopro-notice-modal>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
	</view>
</template>

<script>
import h5Copy from '../../../js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js';
export default {
	components: {},
	data() {
		return {
			list: [
				{
					text: '微信支付',
				},
				{
					text: '支付宝支付',
				},
				{
					text: '银行卡支付',
				},
			],
			show: false,
			def: '微信',
			data: [],
		};
	},
	computed: {},
	onLoad() {
		this.qrCd();
	},
	methods: {
		copy(e) {
			let content = e + ''; // 复制内容，必须字符串，数字需要转换为字符串
			const result = h5Copy(content);
			if (result === false) {
				uni.showToast({
					title: '不支持',
				});
			} else {
				uni.showToast({
					title: '复制成功',
					icon: 'none',
				});
			}
		},
		yulan(urls) {
			uni.previewImage({
				urls: [urls],
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						console.log(err.errMsg);
					},
				},
			});
		},
		click(e) {
			if (e == 0) {
				this.def = '微信';
			} else if (e == 1) {
				this.def = '支付宝';
			} else {
				this.def = '银行卡';
			}
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas,
			});
		},
		// 适用商品
		qrCd() {
			console.log('1111 :>> ', 1111);
			let that = this;
			that.$api('qrCd', {}).then(res => {
				[this.data] = [res.data];
			});
		},
	},
};
</script>

<style lang="scss" scoped>
page,
.content_box {
	font-family: PingFang SC;
}
.page_box {
	// background: linear-gradient(180deg, #8ed3f2 0%, #86efc4 98%);
	background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
}

.head {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 90rpx;
	//background: linear-gradient(0deg, #d9b068, #e6d5a1);
	border-radius: 20rpx;

	font-size: 32rpx;

	font-weight: 600;

	margin: 0 auto;
	margin-top: 50rpx;
	// border: 1rpx solid #000000;
}
.head1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 90rpx;
	//background: linear-gradient(0deg, #d9b068, #e6d5a1);
	border-radius: 20rpx;

	font-size: 32rpx;

	font-weight: 600;

	margin: 0 auto;
	margin-top: 50rpx;
	border: 2rpx solid #000;
}
.info {
	width: 100vw;
	height: 530rpx;
	margin-top: 100rpx;
	.tt {
		font-size: 32rpx;

		font-weight: 600;
	}
}
.submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690rpx;
	height: 90rpx;
	background: linear-gradient(0deg, #d9b068, #e6d5a1);
	// background-color: #ffffff;
	border-radius: 20rpx;

	font-size: 32rpx;

	font-weight: 500;
	color: #673b00;
	margin: 0 auto;
	position: absolute;

	left: 50%;
	bottom: 150rpx;
	transform: translateX(-50%);
}
// 优惠券商品
</style>
